<script setup>
import axios from "axios";
import GlobalParams from "@/GlobalParams.js";
import {onMounted, ref} from "vue";
import dayjs from "dayjs";
import Add from "@/views/financialBook/Add.vue";

//vue 生命周期 ，生命周期钩子
// onMounted(function (){
//   getData();
// })

let dataObj = ref([]);
getData();

function getData() {
  let paras = {};
  paras.user_id = localStorage.getItem("userId");

  axios.post(GlobalParams.postUrl + "/financialBook/getUserFinancial", paras).then((res) => {
    dataObj.value = res.data;
    console.log(dataObj.value);
  })
}


let winOpenFlag=ref(false);

function winOpen(){
  winOpenFlag.value=true;
}

function delInfo(finId){
  if(confirm("是否确定删除？")){
      let paras = {};
      paras.tableKey = finId;
      axios.post(GlobalParams.postUrl + "/financialBook/delInfo",paras).then((res) => {
        if(res.data==="success"){
          getData();
        }
      })
  }
}

function addedHandel(finObj){
  winOpenFlag.value=false;
  getData();
}
</script>

<template>
  <a-button type="primary" @click="winOpen">增加</a-button>
  <a-modal v-model:open="winOpenFlag" :footer="false" title="增加日常收支">
    <Add @added="addedHandel"></Add>
  </a-modal>
  <table class="dataGrid">
    <tr>
      <th style="width:150px;">收支时间</th>
      <th style="width:100px">收支金额</th>
      <th>收支原因</th>
      <th style="width: 100px">操作</th>
    </tr>
    <tr v-for="item in dataObj">
      <td>
        {{ item.costTime }}
      </td>
      <td style="text-align: right">{{ item.costMoney }}</td>
      <td>{{ item.costReason }}</td>
      <td>
        <a-button  type="primary" danger @click="delInfo(item.tablekKey)">删除</a-button>
      </td>
    </tr>
  </table>
</template>

<style scoped>
.dataGrid {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #93ccff;
}

.dataGrid th {
  background: #93ccff;
  font-size: 13px;
  font-family: "宋体", "Times New Roman", Times, serif;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.dataGrid td {
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  border-bottom: 1px solid #93ccff;
  border-right: 1px solid #93ccff;
}
</style>